<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#kuang{
				width: 50px;
				height: 30px;
				border: 1px solid black;
				margin: 200px auto;
				border-radius: 20px;
				position: relative;
				cursor: pointer;
			}
			#qiu{
				width: 20px;
				height: 20px;
				background: gray;
				border-radius: 50%;
				position: absolute;
				top:5px
			}
		</style>
		<script src="../tween.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div id="kuang">
			<div id="qiu">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var kuang = document.getElementById("kuang");
		var qiu = document.getElementById("qiu");
		var panDuan = true;
		kuang.onclick = function(){
				clearInterval(timer);
				var t =0;
				var b = qiu.offsetLeft;
				var c = 30;
				var d = 5;
				var timer = setInterval(function(){
					t++;
					if(t >= d){
						clearInterval(timer);
					}
					qiu.style.left = Tween.Linear(t,b,c,d) + "px";
				},1)
				if(panDuan == true){
					panDuan = false;
					c = 30;
					kuang.style.background = "blue";
					qiu.style.background = "white";
				}else{
					c = -30;
					panDuan = true;
					kuang.style.background = "white";
					qiu.style.background = "gray";
				}
		}
	</script>
</html>